<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //简单模拟Proxy(功能不全)
        function MyProxy(target, handler) {
            let _target = deepClone(target)
            executeDefine(_target, target)
            function executeDefine(_target, target) {
                Object.keys(_target).forEach((key) => {
                    if (typeof (_target[key]) === 'object' && _target[key] !== null) {
                        executeDefine(_target[key], target[key])
                    } else {
                        Object.defineProperty(_target, key, {
                            get() {
                                return handler.get && handler.get(target, key)
                            },
                            set(newVal) {
                                handler.set && handler.set(target, key, newVal)
                            }
                        })
                    }

                })
            }

            return _target

            //进行深拷贝
            function deepClone(org, tar) {
                var tar = tar || {},
                    toStr = Object.prototype.toString,
                    arrType = '[object Array]';
                for (let key in org) {
                    if (org.hasOwnProperty(key)) {
                        if (typeof (org[key]) === 'object' && org[key] !== null) {
                            tar[key] = toStr.call(org[key]) === arrType ? [] : {}
                            deepClone(org[key], tar[key])
                        } else {
                            tar[key] = org[key]
                        }
                    }
                }
                return tar
            }
        }

        let target = {
            a: 1,
            b: { c: 11 },
            c: [1, 3, 4],
            d: 100
        }
        let proxy = new MyProxy(target, {
            get(target, prop) {
                console.log('GET')
                return target[prop]
            },
            set(target, prop, value) {
                console.log('SET')
                target[prop] = value
            }
        })
        console.log(proxy)
        proxy.e = 'guocuicui'
        proxy.e = '111'
        console.log(target)
        // proxy.b.c = 'ccc'
        // console.log(proxy.b.c)
        // console.log(proxy.c)
        // proxy.a = 3
        // console.log(proxy.a)
    </script>
</body>

</html>